<template>
    <div class="study-section" id="study-section">
        <div class="container">
            <div class="header">
                <div class="flex items-center justify-between header-box">
                    <div class="title flex-1">{{ data.name }}</div>
                </div>
                <div class="video-box" v-if="data.type === 2">
                    <video
                        class="video-js vjs-default-skin"
                        controls="controls"
                        width="100%"
                        ref="video"
                        poster="@/assets/images/video-cover.png"
                        controlslist="nodownload"
                        @play="show"
                        @pause="show"
                    >
                        <template v-if="data.video.indexOf('.m3u8') < 0">
                            <source :src="data.video" type="video/ogg" />
                            <source :src="data.video" type="video/mp4" />
                            <source :src="data.video" type="video/webm" />
                        </template>

                        your browser does not support the video tag
                    </video>
                    <img
                        v-if="showPlay"
                        @click="play"
                        src="@/assets/images/play.png"
                        alt="play"/>
                </div>
            </div>
            <div class="content">
                <section v-if="data.type === 2">
                    <div class="title">要点</div>
                    <div class="text" v-html="data.content"></div>
                </section>
                <section v-else>
                    <div class="text" v-html="data.content"></div>
                </section>
                <section>
                    <div class="title">专家&讲师</div>
                    <div class="text">
                        <div class="flex list" v-for="item in data.teachers" :key="item.id">
                            <img :src="item.img" alt="" class="teacher-avatar" />
                            <div class="flex-1">
                                <div class="teacher">{{ item.name }}</div>
                                <div class="teacher-desc">{{ item.position + item.describe }}</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <div class="text-center mt-4">
            <el-button @click="$router.back()">返 回</el-button>
        </div>
    </div>
</template>

<script>
import videoJS from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';

export default {
    components: {

    },
    data() {
        return {
            data: {},
            showPlay: true,
        };
    },
    methods: {
        async fetchData() {
            this.data = await API.get(`section/detail/${this.id}`);
            this.$nextTick(() => {
                const data = this.data;
                if (data.type === 2 && data.video.indexOf('.m3u8') > -1) {
                    const v = videoJS(this.$refs.video);
                    this.changeVideo(v, data.video);
                }
            });
        },

        changeVideo(video, src) {
            if (/\.m3u8$/.test(src)) {
                // 判断视频源是否是m3u8的格式
                video.src({
                    src: src,
                    type: 'application/x-mpegURL', // 在重新添加视频源的时候需要给新的type的值
                });
            } else {
                video.src(src);
            }
            video.load();
        },

        show() {
            this.showPlay = !this.showPlay;
        },

        play() {
            this.$refs.video.play();
        },
    },
    mounted() {
        const id = this.$route.params.id;

        if (id) {
            this.id = id;
            this.fetchData();
        }
    },
};
</script>

<style lang="scss">
.study-section {
    .header {
        background: #fff;
        margin-top: 10px;

        .header-box {
            padding: 30px;
            margin-bottom: 13px;

            .title {
                font-size: 20px;
                color: rgb(51, 51, 51);
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .button {
                border: 1px solid rgb(221, 221, 221);
                font-size: 16px;
                color: rgb(102, 102, 102);
                padding: 9px 21px;
                border-radius: 4px;
                line-height: 1;
                cursor: pointer;

                i {
                    color: rgb(221, 221, 221);
                    font-size: 25px;
                    padding-right: 12px;
                    font-weight: bold;
                }

                &.active {
                    border-color: rgb(45, 112, 174);
                    color: rgb(45, 112, 174);

                    i {
                        color: rgb(45, 112, 174);
                    }
                }
            }
        }
    }
    .video-box {
        position: relative;
        cursor: pointer;

        .video-js {
            height: 600px;

        }
        .video-js, .vjs_video_1-dimensions, video {
            width: 100%;
            // object-fit: fill;
        }

        .vjs-big-play-button {display: none;}

        img {
            position: absolute;
            left: 50%;
            top: 48%;
            transform: translate(-50%, -50%);
            z-index: 10;
            width: 60px;
        }

        .vjs-poster {
            background-size: 100% 100%;
        }
    }

    .content {
        background: #fff;
        padding: 20px 30px;

        section {
            margin-bottom: 36px;
            font-size: 16px;
            color: rgba(51, 51, 51, 0.85);

            .text {
                line-height: 1.5;
                ul {
                    li {
                        margin-bottom: 20px;

                        &::before {
                            content: '';
                            display: inline-block;
                            width: 4px;
                            height: 4px;
                            border-radius: 100%;
                            background: rgb(45, 112, 174);
                            margin-right: 12px;
                            position: relative;
                            top: -4px;
                        }
                    }

                    ul {
                        padding-left: 20px;
                        margin-top: 10px;

                        li {
                            margin-bottom: 10px;
                            list-style-type: none;

                            &::before {
                                content: '';
                                background: transparent;
                                border: 1px solid rgb(45, 112, 174);
                            }
                        }
                    }
                }
            }

            .list {
                margin-bottom: 20px;

                i {
                    font-size: 18px;
                    color: rgb(45, 112, 174);
                    margin-right: 16.5px;
                }

                &.dot {
                    display: flex;
                    align-items: center;

                    &::before {
                        content: '';
                        display: block;
                        width: 4px;
                        height: 4px;
                        border-radius: 100%;
                        background: rgb(45, 112, 174);
                        margin-right: 12px;
                    }
                }
            }
        }

        .title {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: rgb(51, 51, 51);
            margin-bottom: 25px;

            &::before {
                content: '';
                display: inline-block;
                width: 6px;
                height: 20px;
                background: rgb(45, 112, 174);
                margin-right: 8px;
                border-radius: 2px;
            }
        }

        .teacher-avatar {
            width: 72px;
            height: 72px;
            border-radius: 100%;
            margin-right: 26px;
        }

        .teacher {
            color: rgb(51, 51, 51);
            margin-bottom: 7px;
        }

        .teacher-desc {
            font-size: 14px;
            line-height: 1.5;
        }
    }

    .status-box {
        text-align: center;
        font-size: 12px;
        color: rgb(51, 51, 51);
        padding-bottom: 52px;
        cursor: pointer;

        img {
            width: 110px;
            margin: 52px auto 10px;
        }
    }
}

@media screen and (max-width: 768px) {
}
</style>
